<template>
  <div class="login_form">
    <el-container style="padding: 0;">
      <el-header class="header">
        <span style="font-size: 30px;">登录</span>
        <span>没有账号？<router-link class="link" to="/registerForm">点此注册</router-link></span>
      </el-header>
      <el-main>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="demo-ruleForm" validate status-icon>
          <el-form-item prop="account_number">
            <el-input v-model="loginForm.account_number" placeholder="请输入帐号" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-bottom: 10px;">
            <el-input type="password" show-password v-model="loginForm.password" placeholder="请输入密码"
              prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 5px; ">
            <el-checkbox>记住我</el-checkbox>
            <router-link to="/forgotPassword" class="link link_paw">找回密码</router-link>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px;  ">
            <el-button type="primary" class="submit" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <div style="width: 90%;margin: 0 auto;text-align: center">
          <el-divider>其他方式登录</el-divider>
          <div class="my-icon" style="display: flex; justify-content: space-around;">
           <img src="@/assets/qq2.png" alt="" srcset="" >
           <img src="@/assets/微信 (1).png" alt="" srcset="">
           <img src="@/assets/支付宝.png" alt="" srcset="">
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import store from '@/store';
import { Login } from '@/api/index'
export default {
  name: 'KodaiLoginForm',

  data () {
    return {
      // 表单验证
      rules: {
        userAccount: [
          { required: true, message: '请输入帐号', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      },
      loginForm: {
        account_number: '',
        password: ''
      }
    };
  },

  mounted () {

  },

  methods: {
    submitForm (loginForm) {
      this.$refs[loginForm].validate(async (valid) => {
        if (valid) {
          let loading = this.$loading({ lock: true, text: "登录中", background: "rgba(0, 0, 0, 0.7)" });
          try {
            // 使用await关键字调用Login函数，等待异步返回结果
            const { data } = await Login(this.loginForm)
            // 关闭loading加载动画
            loading.close()
            // 如果返回的状态码为200，则表示登录成功
            if (data.code === 200) {
              // 从响应数据中提取角色、令牌和用户数据
              const { role, token, data: user } = data
              // 将响应数据存储到本地存储中

              localStorage.setItem('roles', JSON.stringify(role))
              localStorage.setItem('stoken', JSON.stringify({ user_id: user.user_id, roles: role, tokens: token }))
              // 根据当前时间获取不同的欢迎消息
              const hours = new Date().getHours()
              const str = hours > 7 && hours < 12 ? '上午好!' :
                hours >= 12 && hours <= 13 ? '中午好!' :
                  hours > 13 && hours <= 18 ? '下午好!' :
                    '晚上好!'
              // 根据用户角色生成不同的欢迎信息
              const messages = `欢迎登录奶油奶优${role === '顾客' ? '' : '后台系统'}`
              // 使用Vue.js的notify插件，显示登录成功的提示信息
              this.$notify({
                title: str,
                message: messages,
                type: 'success',
                offset: 50,
                duration: 5000
              })
              // 如果用户角色是顾客，则跳转到首页；否则跳转到后台系统的首页
              this.$router.push(role === '顾客' ? '/MallHome' : '/HomePage')
            } else {
              // 如果返回的状态码不是200，则表示登录失败，显示错误信息
              this.showMessage.call(this, 'error', `登录失败${data.msg}`);
            }
          } catch (err) {
            // 处理异常情况，关闭loading加载动画，并显示错误信息
            loading.close()
            this.showMessage.call(this, 'error', '登录失败' + err);
          }
        } else {
          this.showMessage.call(this, 'error', '登录失败');
          return false;
        }
      });
    },
    resetForm (loginForm) {
      this.$refs[loginForm].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.login_form .header {
  display: flex;
  color: #000;
  justify-content: space-between;
  align-items: center;

}

.link {
  text-decoration: none;
  color: #005980;
}

.link_paw {
  float: right;
}

.submit {
  width: 100%;
}
.my-icon img{
width: 45px;
height: 45px;
}
</style>